iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0
Modern Web

這些那些你可能不知道我不知道的Web技術細節系列 第 4

你可能不知道HTML Code Number

  • 分享至 

  • xImage
  •  

我們都知道的 <>

如果需要在HTML裡面讓瀏覽器顯示<>,可不能直接寫。你應該要這樣寫:

<p>
    example: &lt;input/&gt;
</p>

來呈現內容

example: <input/>

其中lt表示: LESS-THAN ;而gt表示:GREATER-THAN。這是他們的符號名稱,同時還有號碼名稱。
可以使用10進制或16進制來表示這兩個符號,因此還可以寫成:

<p>
    example: &#60;input/&#62;
</p>
<p>
    example: &#x3c;input/&#x3e;
</p>

關於HTML編碼這件事情

與其他程式語言的原始碼儲存方式一樣,HTML文件是以純文字方式存在的。
這也就存在一個問題:如果不告訴電腦該用什麼編碼方式解讀它,就可能解讀成亂碼。

比如以下HTML內容使用Big5儲存:

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8"/>
    <title>你好,世界</title>
  </head>
  <body>
    <h1>你好,世界</h1>
    <p>怎麼跟得上臺灣</p>
  </body>
</html>

你可能得到這樣的結果:

�A�n�A�@��

����o�W�O�W

你可能需要透過修復文字編碼來顯式正確的內容。

現在瀏覽器也太聰明了吧!

現在瀏覽器也太聰明了吧!
不給<meta charset="big5"/>、也不給使用語言<html lang="zh">
既然還可以判斷的出來!

沒辦法我只好欺騙它了...
加上<meta charset="UTF-8"/>吧!

不過並不是所有HTML顯示軟體都具備這樣的能力,所以爲了保險起見,除了設置正確的charset,使用ASCII表達ASCII外的顯式字元會更爲安全。

ASCII有一個特殊神聖的地位在

關於HTML Code Number

如上所示,要在HTMl裏面顯式一些特殊符號,可以使用

  1. &<HTML name>;
  2. &#<decimal code>;
  3. &#x<hexadecimal code>;

這三種方式。

雖然並不是所有都有可以使用的HTML name。但一些常見的還是有的:

Symbol HTML Number HTML Name Common Name
" &#34; &quot; double quotes
< &#60; &lt; less than sign
> &#62; &gt; greater than sign
© &#169; &copy; copyright sign
® &#174; &reg; registered trade mark sign

現在爲了避免被錯誤的解讀可以改成:

<!doctype html>
<html lang="zh">
  <head>
    <meta charset="UTF-8"/>
    <title>&#x4F60;&#x597D;&#xFF0C;&#x4E16;&#x754C;</title>
  </head>
  <body>
    <h1>&#x4F60;&#x597D;&#xFF0C;&#x4E16;&#x754C;&#x600E;&#x9EBC;&#x8DDF;&#x7684;&#x4E0A;&#x81FA;&#x7063;</h1>
  </body>
</html>

我想不管你給的編碼是不是正確的,現在都不怎麼影響顯式內容啦~

顯式emoji

除此之外還可以來顯式emoji。

<h1>
    給我一個大大的&#x1F44D;
</h1>
<h2>
    小小兵最愛&#x1F34C;
</h2>

給我一個大大的?

image alt

參考資料

本文同時發表於我的隨筆


上一篇
你可能不知道在JavaScript裡的萬國碼
下一篇
你可能不知道隱藏在Domain裡的編碼punycode
系列文
這些那些你可能不知道我不知道的Web技術細節33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言